<template>
  <view class="container">
    <view class="search-section">
      <input placeholder="搜索" />
    </view>
	<select v-model="selectedOption">
		<option value="综合排序">综合排序</option>
		<option value="距离最近">距离最近</option>
		<option value="评分最高">评分最高</option>
		<option value="销量最高">销量最高</option>
	</select>
    <view class="shop-item" v-for="(shop, index) in shops" :key="index">
      <image src="../../../static/1.1.png"></image>
	  <view>{{shop.name}}</view>
      <text>{{shop.distance}}m</text>
	   <view>
		   <text>评价：</text>
		   <view class="star-rating">
		     <text v-for="(star, index) in stars" :key="index" @click="rate(index + 1)" :class="{ 'active-star': rating >= index + 1 }">&#9733;</text>
		   </view>
		   <text>当前评分：{{rating}}</text>
		   <text>销量:{{shop.sales}}</text>
	   </view>
	   <view>营业时间: {{shop.businessHours}}</view>
	   <view>{{shop.address}}</view>
    </view>
    <text>暂无更多</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
		selectedOption:"综合排序",
		stars: Array.from({ length: 5 }),
		rating: 0,
      shops: [
        {
          name: '伟业汽车维修厂(人民路店)',
          distance: '44m',
          sales: '322',
          businessHours: '周一至周五 09:00-22:00',
          address: '山阳区人民中路32号',
        },
        {
          name: '伟业汽车维修厂(人民路店)',
          distance: '44m',
          sales: '322',
          businessHours: '周一至周五 09:00-22:00',
          address: '山阳区人民中路32号',
        },
        {
          name: '伟业汽车维修厂(人民路店)',
          distance: '44m',
          sales: '322',
          businessHours: '周一至周五 09:00-22:00',
          address: '山阳区人民中路32号',
        },
      ],
    };
  },
  methods:{
	  rate(score) {
	        this.rating = score;
	      },
  }
  
};
</script>

<style>
.container {
  padding: 20px;
}
.search-section {
  
  align-items: center;
}
input{
	border: 1px dotted cadetblue;
	border-radius: 10px;
}
.shop-item {
  margin-top: 10px;
  width: 375px;
  height: 160px;
  background-color: aqua;
  
}
image{
	width: 91px;
	height: 82px;
	float: left;
}

.star-rating text {
  font-size: 24px;
  cursor: pointer;
}
.active-star {
  color: gold;
}
</style>
